<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        #userInfoDialog {
            padding: 20px;
            width: 400px;
            display: none;
            /*隐藏层*/
        }

        #userInfoDialog p {
            padding: 10px 0;
        }
    </style>


</head>

<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header">订单列表</div>
            <div class="layui-card-body">
                <table id="orderlist" lay-filter="orderlistFilter"></table>
            </div>
        </div>
    </div>

    <!--详情对话框-->
    <div id="details" style="display: none;padding: 20px">
        <table class="layui-table" lay-skin="nob">
            <tr>
                <td>ID</td>
                <td><span id="id"></span></td>
            </tr>
            <tr>
                <td>用户名</td>
                <td><span id="username"></span></td>
            </tr>
            <tr>
                <td>性别</td>
                <td><span id="sex"></span></td>
            </tr>
            <tr>
                <td>车次</td>
                <td><span id="lid"></span></td>
            </tr>
            <tr>
                <td>起始站</td>
                <td><span id="startingstation"></span></td>
            </tr>
            <tr>
                <td>终点站</td>
                <td><span id="destination"></span></td>
            </tr>
            <tr>
                <td>日期</td>
                <td><span id="date"></span></td>
            </tr>
            <tr>
                <td>发车时间</td>
                <td><span id="departuretime"></span></td>
            </tr>
            <tr>
                <td>到达时间</td>
                <td><span id="arrivaltime"></span></td>
            </tr>
            <tr>
                <td>票价</td>
                <td><span id="price"></span></td>
            </tr>



            <!-- <tr>
            <td rowspan="3">
                <img src="" id="coverimg" height="96px" alt="">
            </td>
            <td colspan="2">
                <h2><span id="listname"></span></h2>
                <span><i class="layui-icon layui-icon-username"></i><span id="create"></span></span>
            </td>
        </tr>
        <tr>
            <td colspan="2">标签: <span id="tags"></span></td>
        </tr>
        <tr>
            <td>点击量: <span id="clickcount"></span></td>
            <td>歌曲总数: <span id="musiccount"></span></td>
        </tr> -->

        </table>

        <!-- 专辑详情表-->
        <!-- <table id="musiclistDetails"></table> -->
    </div>

    <script src="../res/layui/layui.js"></script>
    <script>
        layui.use(function () {
            //加载获取table模块
            var table = layui.table;
            //加载获取layer弹层模块
            var layer = layui.layer;
            //加载jquery对象
            var $ = layui.jquery;
            var util = layui.util;
            var form = layui.form;

            $.get('http://127.0.0.1:8080/user/listAll',function(resp){
                let list = resp.data
                $.each(list,(i,a)=>{
                    $('#uid').append(`<option value="${a.id}">${a.username}</option>`)
                })
                //
                form.render('select')
            })
            $.get('http://127.0.0.1:8080/line/listAll',function(resp){
                let list = resp.data
                $.each(list,(i,a)=>{
                    $('#lineid').append(`<option value="${a.id}">${a.id}</option>`)
                })
                //
                form.render('select')
            })

            table.render({
                elem: '#orderlist',                              //用于渲染数据的表格元素选择器
                url: 'http://127.0.0.1:8080/order/list',         //服务端数据接口
                page: {//分页配置
                    curr: 1,
                    limit: 10,
                    limits: [5, 10, 15, 20, 30]

                },                                      //开启分页
                cols: [[
                    { type: 'checkbox' },
                    { title: '序号', type: 'numbers' },
                    { title: 'ID', field: 'id' },
                    { title: '用户名', field: 'username' },
                    //{title:'性别',field:'sex',templet:function(d){
                    //    if(d.sex === 1){
                    //        return '男'
                    //    }
                    //    return '女'
                    //}},
                    //{title:'车次',field:'lid'},
                    { title: '起始站', field: 'startingstation' },
                    { title: '终点站', field: 'destination' },
                    { title: '日期', field: 'date', templet: '<div>{{ layui.util.toDateString(d.addtime,"yyyy年MM月dd日") }}</div>' },
                    { title: '发车时间', field: 'departuretime' },
                    { title: '到达时间', field: 'arrivaltime' },
                    { title: '票价', field: 'price' },
                    { title: '操作', templet: '#rowTools', width: 300 },

                ]]
            })

            table.on('tool(orderlistFilter)', function (obj) {
                //获取被点击元素的lay-event值，通过该值确定哪个按钮被点击
                let e = obj.event
                switch (e) {
                    case 'details':
                        //详情查看
                        layer.open({
                            type: 1,                                //弹层类型 1：页面层
                            content: $('#details'),         //弹层dom元素
                            closeBtn: 2,                           //标题栏关闭图标样式  
                            shadeClose: true,
                            success: function (layero, index, that) {  //弹层被成功打开后回调   
                                layero.find('#id').text(obj.data.id)
                                layero.find('#username').text(obj.data.username)
                                layero.find('#sex').html(obj.data.sex === 1 ? '男' : '女')
                                layero.find('#lid').text(obj.data.lid)
                                layero.find('#startingstation').text(obj.data.startingstation)

                                layero.find('#destination').text(obj.data.destination)
                                layero.find('#date').text(obj.data.date)
                                layero.find('#departuretime').text(obj.data.departuretime)
                                layero.find('#arrivaltime').text(obj.data.arrivaltime)
                                layero.find('#price').text(obj.data.price)
                            },
                            btn: ['关闭'],   //自定义按钮
                            btnAlign: 'c',   //自定义按钮位置 l-左  c-中  r-右
                            btn1: function () {    //自定按钮事件
                                layer.closeAll()
                            }
                        })
                        break;
                    case 'del':
                        //删除
                        layer.confirm('确认删除该订单吗?', { icon: 3 }, function () {
                            $.ajax({
                                url: `http://127.0.0.1:8080/order/del/${obj.data.id}`,
                                type: 'DELETE',
                                success: function (resp) {
                                    if (resp.code === 0) {
                                        layer.msg(resp.msg)
                                        //删除dom结构，并更新缓存
                                        obj.del()
                                    } else {
                                        layer.alert(resp.msg, { icon: 2 })
                                    }
                                }
                            })
                        })
                        break;
                    case 'edit':
                        layer.open({
                            type: 1,
                            title: '修改',
                            content: $('#updateOrder'),
                            success: function () {
                                
                                //数据回显
                                form.val('updateOrder-form', obj.data)
                            },
                            btn: ['确定', '取消'],
                            btnAlign: 'c',
                            btn1: function (index, layero) {
                                let data = form.val('updateOrder-form')
                                console.log(data)
                                //判断 购买用户和车次不能为空
                                if(obj.data.uid === 0 || data.lineid === 0){
                                    layer.alert("购买用户和车次不能为空", { icon: 2 })
                                }
                                console.log(data)
                                //获取表单数据,并封装为formData对象
                                let formData = new FormData($('#updateOrder-form')[0])
                                $.ajax({
                                    url: 'http://127.0.0.1:8080/order/update',
                                    type: 'PUT',
                                    processData: false,
                                    contentType: false,
                                    data: formData,
                                    success: function (resp) {
                                        if (resp.code === 0) {
                                            layer.msg(resp.msg)
                                            layer.closeAll()
                                            table.reloadData('orderlist', {
                                                scrollPos: 'fixed'  // 保持滚动条位置不变 
                                            })
                                        } else {
                                            layer.alert(resp.msg, { icon: 2 })
                                        }
                                    }
                                })

                            }
                        });
                        break;
                }
            })
        })
    </script>
    <div id="updateOrder" style="display: none;padding:20px">
        <form class="layui-form layui-form-pane" lay-filter="updateOrder-form" id="updateOrder-form">
            <div class="layui-form-item">
                <label class="layui-form-label">订单id:</label>
                <div class="layui-input-block">
                    <input class="layui-input" type="text" name="id" id="id" lay-verify="required" lay-verType="tips"
                        lay-reqText="请输入订单id">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">购买用户:</label>
                <div class="layui-input-block">
                    <select name="uid" id="uid">
                        <option value="0">不可空</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">车次:</label>
                <div class="layui-input-block">
                    <select name="lineid" id="lineid">
                        <option value="0">不可空</option>
                    </select>
                </div>
            </div>
        </form>
    </div>


    <!--操作栏自定义模板-->
    <script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">
            <i class="layui-icon layui-icon-more"></i>
            详情
        </button>
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>
            修改
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </div>
</script>


</body>

</html>